<script setup>
import { ref,defineProps, onMounted} from 'vue'
const props = defineProps({
  designWidth: {
    type: Number,
    default: 1920
  },
  designHeight: {
    type: Number,
    default: 1080
  }
})
// 组件内使用props
const { designWidth, designHeight } = props
const getScale = (designWidth, designHeight) => {
    const windowWidth = document.documentElement.clientWidth
    const windowHeight = document.documentElement.clientHeight
    // 此函数返回一个比例值，用于计算设计稿宽高可以整屏显示的缩放比列
    return Math.min(windowWidth / designWidth, windowHeight / designHeight)
}
// 计算整屏显示的位置
const getPosition = (designWidth, designHeight) => {
    const windowWidth = document.documentElement.clientWidth
    const windowHeight = document.documentElement.clientHeight
    const left = (windowWidth - designWidth) / 2
    const top = (windowHeight - designHeight) / 2
    return { left, top }
}
const scale = ref(getScale(designWidth, designHeight))
const position = ref(getPosition(designWidth, designHeight))
// console.log(scale.value);

onMounted(() => {
//   // console.log('Box mounted')
  window.addEventListener('resize', () => {
    scale.value = getScale(designWidth, designHeight)
    position.value = getPosition(designWidth, designHeight)
  })
})
</script>

<template>
    <div class="warp">
        <div class="box" :style="{transformOrigin:'center center', transform: `scale(${scale}) ` , width: `${designWidth}px`, height: `${designHeight}px`, left: `${position.left}px`, top: `${position.top}px`}">
            <slot></slot>
        </div>
    </div>
</template>

<style scoped>

.warp {
    width: 100%;
    height: 100%;
    position: relative;
}
.box {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
